I'm making an app bar with material-ui and I'm receiving in the console at least 3 times the same error

    Uncaught Error: Element type is invalid: expected a string (for built-in components) or 
    a class/function (for composite components) but got: undefined. You likely forgot to 
    export your component from the file it's defined in, or you might have mixed up default 
    and named imports.

    Check the render method of `Barra`.
    at createFiberFromTypeAndProps (react-dom.development.js:25053)
    at createFiberFromElement (react-dom.development.js:25081)
    at reconcileSingleElement (react-dom.development.js:14052)
    at reconcileChildFibers (react-dom.development.js:14112)
    at reconcileChildren (react-dom.development.js:16990)
    at updateHostComponent (react-dom.development.js:17632)
    at beginWork (react-dom.development.js:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)```

The AppBar code is very simple,that's why I'm so confused with it :


import React from 'react'
import {AppBar,ToolBar,Typography} from '@material-ui/core'
import {makeStyles} from '@material-ui/core/styles'
const useStyles=makeStyles({
    titulo:{
        background:'linear-gradient(45deg,#5BD452,#204F24)',
        border:0,
        borderRadius:15,
        color:'white'
    }
})

const Barra =()=>{
  
 const estilos=useStyles()
    return(
        <AppBar>
          <ToolBar>
            <Typography className={estilos.titulo}>
              Jacaranda
            </Typography>
          </ToolBar>
        </AppBar>
    )
}
export default Barra

I have an idea because I'm trying to make a change in my code structure changing where the router would be,but I think that doesn't have any sense at all